<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>法律援助平台</title>
    
    <!-- SEO优化 -->
    <meta name="description" content="为社会弱势群体提供专业、便捷的法律咨询与援助服务，守护您的合法权益。">
    <meta name="keywords" content="法律援助,法律咨询,律师服务,法律帮助">
    <meta name="author" content="法律援助平台">
    
    <!-- 性能优化 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    
    <!-- DNS预解析 -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
    
    <!-- 预连接 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="/src/assets/main.css" as="style">
    <link rel="preload" href="/src/main.js" as="script">
    
    <!-- 字体预加载 -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"></noscript>
    
    <!-- 主题色 -->
    <meta name="theme-color" content="#409eff">
    <meta name="msapplication-TileColor" content="#409eff">
    
    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "法律援助平台",
      "description": "为社会弱势群体提供专业、便捷的法律咨询与援助服务",
      "url": "https://your-domain.com",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://your-domain.com/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>
    
    <!-- 性能监控 -->
    <script>
      // 性能监控
      window.addEventListener('load', function() {
        setTimeout(function() {
          const perfData = performance.getEntriesByType('navigation')[0];
          const loadTime = perfData.loadEventEnd - perfData.loadEventStart;
          const domContentLoaded = perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart;
          
          console.log('🚀 页面加载性能:', {
            'DOM内容加载时间': domContentLoaded + 'ms',
            '页面完全加载时间': loadTime + 'ms',
            '总加载时间': perfData.loadEventEnd - perfData.fetchStart + 'ms'
          });
          
          // 可以在这里发送性能数据到分析服务
          if (window.gtag) {
            window.gtag('event', 'timing_complete', {
              name: 'load',
              value: Math.round(loadTime)
            });
          }
        }, 0);
      });
      
      // 错误监控
      window.addEventListener('error', function(e) {
        console.error('页面错误:', e.error);
        // 可以在这里发送错误信息到监控服务
      });
      
      // 未处理的Promise拒绝
      window.addEventListener('unhandledrejection', function(e) {
        console.error('未处理的Promise拒绝:', e.reason);
        // 可以在这里发送错误信息到监控服务
      });
    </script>
  </head>
  <body>
    <div id="app">
      <!-- 加载动画 -->
      <div id="loading" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.3s ease;
      ">
        <div style="
          text-align: center;
          color: white;
        ">
          <div style="
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
          "></div>
          <div style="font-size: 18px; font-weight: 500;">正在加载法律援助平台...</div>
        </div>
      </div>
      
      <style>
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      </style>
    </div>
    
    <script type="module" src="/src/main.js"></script>
    
    <!-- 移除加载动画 -->
    <script>
      window.addEventListener('load', function() {
        const loading = document.getElementById('loading');
        if (loading) {
          loading.style.opacity = '0';
          setTimeout(() => {
            if (loading.parentNode) {
              loading.parentNode.removeChild(loading);
            }
          }, 300);
        }
      });
      
      // 如果5秒后还没加载完成，也移除加载动画
      setTimeout(function() {
        const loading = document.getElementById('loading');
        if (loading && loading.parentNode) {
          loading.style.opacity = '0';
          setTimeout(() => {
            if (loading.parentNode) {
              loading.parentNode.removeChild(loading);
            }
          }, 300);
        }
      }, 5000);
    </script>
  </body>
</html>
